<template>
  <table class="jstable checkoutList" border="1" cellspacing="0">
    <!-- <button @click="edit">修改第一条数据</button> -->
    <thead>
      <tr>
        <th rowspan="2">Orders</th>
        <th rowspan="2">Store</th>
        <th rowspan="2">Product</th>
        <th class="j-b-l tcenter" colspan="3">ScareOrder Quote</th>
      </tr>
      <tr>
        <th class="j-b-l tright">Product cost</th>
        <th class="j-b-l">Shipping</th>
        <th class="j-b-l tright">Total</th>
      </tr>
    </thead>
    <tbody id="address-td"></tbody>
  </table>

  <!-- 编辑备注 -->
  <el-dialog
    custom-class="cLdialog"
    v-model="dialogVisible"
    title="Make Note"
    width="30%"
  >
    <span>Make Note</span>
    <el-input
      class="m-t10"
      v-model="noteVlaue"
      maxlength="100"
      show-word-limit
      type="textarea"
    />

    <template #footer>
      <span class="dialog-footer">
        <el-button type="primary" @click="okEdit"> Apply </el-button>
      </span>
    </template>
  </el-dialog>
  <!--  -->
  <el-tooltip
    v-model:visible="visible"
    :content="tooltipVal"
    placement="bottom"
    effect="light"
    trigger="click"
    virtual-triggering
    :virtual-ref="triggerRef"
  />
</template>

<script lang="ts" setup>
// import $ from "jquery";
import { ref, onMounted, onUnmounted, Ref } from "vue";
import json from "@/mock/json.json";
import { domData, fiterArr } from "./index.js";
import $ from "jquery";
import { useRouter } from "vue-router";
import { ElMessage } from "element-plus";
const visible = ref(false); //控制tooltip显示或隐藏
const tooltipVal = ref(""); //控制tooltip显示或隐藏
const $router = useRouter();

const props = defineProps(["query"]);
const triggerRef = ref({
  getBoundingClientRect() {
    return position.value;
  },
});
const position = ref({
  top: 0,
  left: 0,
  bottom: 0,
  right: 0,
});
const dialogVisible = ref(false);

const noteVlaue = ref("");
const primitiveNote = ref(null);
const addressTd = ref<any>(null);
const tableData = ref([]);
// 获取静态数据数据渲染测试
let tableDataArr = json.data.orders;

// 初始化表格数据
const initTable = async () => {
  let res = await fiterArr(tableDataArr); //加上异步

  // 如果订单号存在根据订单显示
  if (props.query.value) {
    res = res.filter((e: any) => e.ns_order_no === props.query.value);
  }

  tableData.value = res;
  if (addressTd.value)
    addressTd.value.innerHTML = domData(res ?? tableData.value);
};

// 显示物流
const onEditBlock = (e) => {
  $(e.target).toggleClass("rotate180");
  $(e.currentTarget.nextElementSibling).toggle();
};

// 详情页跳转
const onDetailsPage = (e) => {
  $router.push({
    path: "/Order/ScaleOrder/OrderDetails",
    query: { value: e, type: "list" },
  });
};

// 备注编辑
const onEditNote = (e) => {
  console.log(e);

  primitiveNote.value = e.target;
  let checkoutListEditHtml = $(primitiveNote.value)
    .parent()
    .children(".checkoutListEditHtml");
  console.log(checkoutListEditHtml.html());

  if (checkoutListEditHtml.html() == "Make Note") {
    noteVlaue.value = "";
  } else {
    noteVlaue.value = checkoutListEditHtml.html();
  }
  dialogVisible.value = true;
};
const okEdit = () => {
  let checkoutListEdit = $(primitiveNote.value)
    .parent()
    .children(".checkoutListEditHtml");
  let noteImgDom = $(primitiveNote.value).parent().children(".noteImg");
  let editImgDom = $(primitiveNote.value).parent().children(".ml-5");

  if (noteVlaue.value !== "") {
    noteImgDom.hide();
    checkoutListEdit.html(noteVlaue.value);
    editImgDom.addClass("editImg");
  }
  console.log(noteImgDom);

  dialogVisible.value = false;
};

// copy
const onCopy = (event, e) => {
  console.log(event);
  event.stopPropagation();
  var $temp = $("<input>");
  $("body").append($temp);
  $temp.val(e).select();
  document.execCommand("copy");
  $temp.remove();
  ElMessage({
    message: "复制成功",
    type: "success",
  });
};
const checkoutListEditHtmlEnter = (event, e) => {
  event.stopPropagation();

  if (noteVlaue.value === "") return;
  let val = event.target.innerHTML;
  visible.value = true;
  tooltipVal.value = val;
  position.value = DOMRect.fromRect({
    width: 0,
    height: 0,
    x: event.clientX,
    y: event.clientY,
  });
};
const checkoutListEditHtmlLeave = () => {
  visible.value = false;
};
onMounted(() => {
  initTable();
  addressTd.value = $("#address-td")[0];
  window.onEditBlock = onEditBlock; //物流编辑
  window.onDetailsPage = onDetailsPage;
  window.onEditNote = onEditNote; //备注编辑
  window.onCopy = onCopy;
  window.checkoutListEditHtmlEnter = checkoutListEditHtmlEnter;
  window.checkoutListEditHtmlLeave = checkoutListEditHtmlLeave;
});

//移除监听 组件实例被卸载后调用
onUnmounted(() => {
  // console.log('onUnmounted');
  window.onEditBlock = null; //
  window.onDetailsPage = null; //跳转
  window.onEditNote = null; //跳转
  // window.checkoutListEditHtmlEnter = checkoutListEditHtmlEnter;
  // window.checkoutListEditHtmlLeave = checkoutListEditHtmlLeave;
});
</script>

<style lang="scss" scoped></style>
